<!--
 * @Author: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @Date: 2024-10-08 11:09:01
 * @LastEditors: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @LastEditTime: 2024-10-16 17:02:59
 * @FilePath: \ft-apply-admin\src\views\applicationDetails\CommonTransfer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="common-transfer">
    <BasicModal :show="show" :title="props.title || '批量操作'" width="30%" :widthComfirm="true" @closeModal="show = false"
      @comfirm="comfirm">
      <template #content>
        <a-transfer v-if="show" :list-style="{
          width: '250px',
          height: '400px',
        }" v-model:target-keys="targetKeys" show-search :filter-option="filterOption" :one-way="true"
          v-model:selected-keys="selectedKeys" :data-source="dataSource" :titles="['', '']"
          :render="item => item.userName" @change="handleChange" @selectChange="handleSelectChange" pagination />
      </template>
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
import { ref, defineEmits, defineProps, defineExpose } from "vue";
const props = defineProps(['title'])
import BasicModal from "@/views/ApplicationDetails/Modals/BasicModal.vue";
const emits = defineEmits(['comfirm'])
const show = ref<boolean>(false);
const comfirm = () => {
  const list: any = []
  dataSource.value.forEach(el => {
    targetKeys.value.forEach(item => {
      if (el.resumesId === item) {
        list.push(el)
      }
    })
  })
  show.value = false
  emits('comfirm', list);

}

const targetKeys = ref<any>([]);
const selectedKeys = ref<any>([]);
const dataSource = ref<any>([]);

const open = (sourceData) => {
  show.value = true;
  dataSource.value = sourceData
}

const handleChange = (nextTargetKeys: string[], direction: string, moveKeys: string[]) => {
  console.log('targetKeys: ', nextTargetKeys);
  console.log('direction: ', direction);
  console.log('moveKeys: ', moveKeys);

};

const handleSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
  console.log('sourceSelectedKeys: ', sourceSelectedKeys);
  console.log('targetSelectedKeys: ', targetSelectedKeys);
}
const filterOption = (inputValue: string, option: any) => {
  return option.userName.indexOf(inputValue) > -1;
};

const clear =()=>{
  targetKeys.value=[];
  selectedKeys.value=[]
}
defineExpose({
  open,
  clear
})
</script>
<style lang="less" scoped>
:deep(.ant-transfer-list-pagination) {
  text-align: center !important;
}
</style>